import React, { PureComponent } from 'react'
//优化 Component PureComponent 更新的状态如果不变化的话就页面渲染不执行

//react 性能优化的方案 使用PureComponent  和  shouldComponentUpdate 控制数据相同的时候是否重新更新渲染
class Film extends PureComponent {
    state = {
        name: '123'
    }
    //数据初始化的时候会合并进去state里面  更新的时候也执行 像computed
    static getDerivedStateFormProps(nextProps, nextState) {
        return {
            name: '231'
        }
    }

    getSnapshotBeforeUpdate() {//类似nexttick 保证dom节点已被全部渲染完毕可以获取  通常用于滚动高度
        return 123
    }
    componentDidUpdate(prevProps, prevState, value) {//getSnapshotBeforeUpdate 返回的值会在value里面获取到
        //这里判断旧状态与新状态 相等就return 
        //在这里面发请求
    }

    render() {
        return (
            <div>
                插槽的使用
                {this.props.children[0]}
                {this.props.children[1]}
                {this.props.children[2]}
            </div>
        )
    }
    //只能放在孩子组件
    componentWillReceiveProps(nextProps) {
        //最早获得父组件的参数
    }
}

export default class app extends Component {
    componentWillMount() { }//create
    componentDidMount() { }//mounted

    componentDidUpdate() { }
    shouldComponentUpdate(nextProps, nextState) {
        //是否节点没变化的时候更新
        //新传值 nextProps 新状态 nextState
        if (this.state.text === nextState.text) {
            return false
        }
        return true
    }
    render() {
        //插入多个时会变成一个插槽数组
        return (
            <div>
                <Film>
                    {null}
                    <div>2222</div>
                    <div>3333</div>
                </Film>
            </div>
        )
    }
}
